<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="back" fixed placeholder />
    <div class="container">
        <div class="address">
            <van-address-list :list="addresInfo" :switchable="false" class="addressList" />
        </div>
        <div class="divider"></div>

        <van-card v-for="(item, index) in goodsInfo" :key="index" :num="item.count"
            :price="(item.goodsInfo.price - 0).toFixed(2)" :desc="item.goodsInfo.detail_info??''" :title="item.goodsInfo.name"
            :thumb="item.goodsInfo.pic_url" />

        <van-submit-bar :price="(totalPrice * 100)" button-text="提交订单" @submit="onSubmit">
            <template #top>
                <van-field autosize v-model="value" type="textarea" label="备注" rows="3" maxlength="50" show-word-limit
                    placeholder="请输入用户名" />
            </template>
        </van-submit-bar>

        <van-action-sheet v-model:show="isShow" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel"
            @select="onsSelect" />

    </div>
</template>
    
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, computed } from 'vue'
import { showConfirmDialog } from 'vant';
import { addOrder } from '@/api/order.js'
let value = ref('') //备注信息
let allPrice = ref(0) //用于暂存订单总价
let isShow = ref(false)
let actions = ref([
    { name: '微信' },
    { name: '支付宝' },
    { name: '云支付' },
])

const route = useRoute()
const router = useRouter();

//如果不带参数直接访问此页面，跳转到cart页面
if (!JSON.parse(decodeURI(atob(route.query.orderInfo)))) {
    router.replace('/cart');
}
//接受购物车数据和地址信息
let addresInfo = ref([JSON.parse(decodeURI(atob(route.query.orderInfo))).adress])
let goodsInfo = ref(JSON.parse(decodeURI(atob(route.query.orderInfo))).goods)

//退出订单生成页
let back = () => {
    showConfirmDialog({
        message:
            '退出生成订单页？',
    }).then(() => {
        router.replace('/home');
    }).catch(() => {
        console.log('no');
    });
}

//提交订单
let onSubmit = () => {
    isShow.value = true
}
let onsSelect = async (res) => {
    let pay_type = res.name == '微信' ? 1 : (res.name == '支付宝' ? '2' : '3')
    const order_goods_infos = goodsInfo.value.map(item => ({
        goods_id: item.goodsInfo.id,
        count: item.count,
    }));
    const order = {
        pay_type: pay_type,
        status: 2, // 已支付
        remark: value.value,
        price: allPrice.value,
        consignee_name: addresInfo.value[0].name,
        consignee_phone: addresInfo.value[0].tel,
        consignee_address: addresInfo.value[0].address,
        order_goods_infos: order_goods_infos,
    };
    await addOrder(order)
    isShow.value = false
    // 回到订单页
    router.replace('/order');
}
let onCancel = async() => {
    const order_goods_infos = goodsInfo.value.map(item => ({
        goods_id: item.goodsInfo.id,
        count: item.count,
    }));
    const order = {
        pay_type: 0,
        status: 1, // 未支付
        remark: value.value,
        price: allPrice.value,
        consignee_name: addresInfo.value[0].name,
        consignee_phone: addresInfo.value[0].tel,
        consignee_address: addresInfo.value[0].address,
        order_goods_infos: order_goods_infos,
    };
    await addOrder(order)
    isShow.value = false
    // 回到订单页
    router.replace('/order');
}

//计算订单总价
let totalPrice = computed(() => {
    goodsInfo.value.forEach(item => {
        allPrice.value += item.goodsInfo.price
    });
    return allPrice.value
})

</script>
    
<style  lang="scss" scoped>
.container {
    --van-submit-bar-z-index: 100;
    --van-address-list-add-button-z-index: 1;

    .address {
        padding: 20px;
        background-color: #fff;
        --van-address-list-padding: 0;

        .addressList {
            :deep(.van-badge__wrapper) {
                display: none;
            }
        }
    }

    .divider {
        border: 1px dashed skyblue;
    }

    .submit_box {
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        background-color: #fff;
    }

}
</style>

